var amount;
var vm = new Vue({
	el: '#app',
	data: {
		user: []
	},
	methods: {
		resetHandle(index) {
			var newName = prompt("姓名");
			var newPassword = prompt("密码");

			var url = "/super/ChangeTeacherServlet?name=" 
			+ this.user[index].name
			+ "&payrollNumber=" + this.user[index].payrollNumber;
			if(newName != null || "" != newName)
			{
				url += "&newName=" + newName;
			}
			if(newPassword != null || "" != newPassword)
			{
				url += "&newPassword=" + newPassword;
			}
			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					alert(this.responseText);
					flushTeachers(0,4);
				}
			};
			// console.log(xhttp.app.data);
			
			xhttp.open("post", url , true);
			xhttp.send();
		},
		removeHandle(index) {
			var name = this.user[index].name;
			var payrollNumber = this.user[index].payrollNumber;
		
			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					alert(this.responseText);
					flushTeachers(0,4);
				}
			};
			// console.log(xhttp.app.data);
			
			xhttp.open("post", "/super/DeleteTeacherServlet?name=" 
			+ name 
			+ "&payrollNumber=" + payrollNumber , true);
			xhttp.send();
		},
		Return() {
			window.location.replace("./teacQuery.html");
		},
		goReset() {
			window.location.replace("./manager.html");
		}
	},

})

function flushTeachers(start, end)
{
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			// console.log(this.responseText)
			text = JSON.parse(this.responseText)
			
			amount = text.amount;
			
			vm.$data.user = text.teachers;
			
			flushButtons(amount,Math.floor(start / 5 + 1))
			console.log(app.$data);
		}
	};
	// console.log(xhttp.app.data);

	xhttp.open("post", "/super/GetTeachersServlet?start=" 
	+ start 
	+ "&end=" + end , true);
	xhttp.send();

}
function flushButtons(amount,page)
{

	var totalPage = Math.ceil(amount / 5);
	var innerHtml = "";
	if(page == 1)
	{
		innerHtml += '<li class="first disabled"><a href="javascript:void(0)">首页</a></li><li class="prev disabled"><a href="javascript:void(0)">上一页</a></li>'
	}
	else
	{
		innerHtml += '<li class="first"><a href="javascript:flushTeachers(0,4)">首页</a></li><li class="prev">'
		+ '<a href="javascript:flushTeachers(' + (5*(page - 1) - 5)+ ',' + (5*(page - 1) - 1) +')">上一页</a></li>'
	}
	for (var i = 1;i <= totalPage;i++)
	{
		if (i == page)
		{
			innerHtml += "<li class=\"page active\">";
			innerHtml += "<a href=\"javascript:void(0)\">" + i + "</a>";
			innerHtml += "</li>";
		}
		else{
			innerHtml += "<li class=\"page\">";
			innerHtml += "<a href=\"javascript:flushTeachers("+ (5*i - 5) +"," + (5*i - 1) +")\">" + i + "</a>";
			innerHtml += "</li>";
		}
	}
	if (page == totalPage)
	{
		innerHtml += '<li class="next disabled"><a href="javascript:void(0)">下一页</a></li><li class="last disabled"><a href="javascript:void(0)">末页</a></li>'
	}
	else
	{
		innerHtml += '<li class="next"><a href="javascript:flushTeachers(' + (5*(page + 1) - 5)+ ',' + (5*(page + 1) - 1)
		+')">下一页</a></li><li class="last"><a href="javascript:flushTeachers(' + (totalPage*5 - 5) + ',' + (totalPage*5 - 1) + ')">末页</a></li>'
	}
	document.getElementById("buttons").innerHTML = innerHtml;
}

window.onload = function()
{
	flushTeachers(0,4);
}